<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#topBox{
			background:#f00;
			position:fixed;
			top:-100px;
			left:0;
			width:100%;
			font-size:50px;
			font-weight:bold;
			text-align: center;
			line-height:100px;
		}
		#back{
			width:100px;
			height:100px;
			background-color: #abcdef;
			position:fixed;
			right:20px;
			bottom:50px;
			display:none;
		}
	</style>
</head>
<body>
    <!-- // 1、当滚动距离达到300px时显示出顶部公共
	// 2、当滚动距离达到350px是显示回到顶部
	// 3、当点击回到顶部 慢慢的滑动上去 -->
	<div id="topBox">
		顶部通栏广告
	</div>
	<p style="width:20px;">
		锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。
		床前明月光，疑是地上霜。举头望明月，低头思故乡。
		
		离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。
	</p>
	<div id="back">
		回到顶部
	</div>
    <script>
        var topBox=document.querySelector("#topBox");
        var back=document.querySelector("#back");
        window.onscroll=function(){
            var top = document.documentElement.scrollTop || document.body.scrollTop; 
            console.log(top);
            if(top>=300){
                topBox.style.top=0;
            }if(top>=350){
                back.style.display="block";
                
            }else{
                topBox.style.top="-100px";
            }
        }
        back.onclick=function(){
            var timer=setInterval(function(){
                var top = document.documentElement.scrollTop || document.body.scrollTop;
               if(top<=0){
                clearInterval(timer);
               }else{
                document.documentElement.scrollTop=top-10;
               }
            },10)
           }
    </script>
</body>
</html>